<template>
  <div class="GxTable">
    <el-table
      height="100%"
      v-bind="$attrs"
      v-on="$listeners"
      :data="TabData"
      style="width: 100%"
      :cell-style="{ padding: '2px', color: '#000', height: '40px' }"
      ref="GxTable"
    >
      <MyTableColumn v-for="item in TabColumn" :item="item" :key="item.label">
        <template v-for="name in slotList" v-slot:[name]="{ row, index }">
          <slot :name="name" :row="row" :index="index" :column="name"> </slot>
        </template>
      </MyTableColumn>
    </el-table>
  </div>
</template>

<script>
import MyTableColumn from './MyTableColumn.vue';
export default {
  name: 'GxTable',
  components: { MyTableColumn },
  props: {
    data: {
      require: true,
      type: Array,
      default: [],
    },
    column: {
      require: true,
      type: Array,
      default: [],
    },
  },
  mounted() {},
  watch: {},
  computed: {
    TabData() {
      this.data.forEach((item, index) => {
        item['index'] = index + 1;
      });
      return this.data;
    },
    TabColumn() {
      return this.column;
    },
    // 插槽集合 (column中所有isSlot对应的prop集合)
    slotList() {
      const { column } = this;
      let arrList = [];
      arrMap(column);
      function arrMap(arr) {
        arr.forEach((m) => {
          if (m.children && m.children[0]) {
            arrMap(m.children);
          } else {
            if (m.isSlot) {
              arrList.push(m.prop);
            }
          }
        });
      }
      return arrList;
    },
  },
  data() {
    return {
      value: '',
    };
  },
  methods: {
    doLayout() {
      this.$refs.GxTable.doLayout();
    },
  },
};
</script>

<style scoped lang="less">
.GxTable {
  height: 100%;
  width: 100%;
}
</style>
